<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="50" title="收藏" title-size="36" title-color="#333"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="scurrent"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[0]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="goods_area">
              <view
                class="goods_box"
                @click="routeTo"
                v-for="(item, index) in itemList[0]"
                :key="index"
              >
                <view class="goods-list-box" @click="routeTo()">
                  <view class="gods-img-box">
                    <image class="goods-img" :src="item.picUrl" mode=""></image>
                  </view>
                  <view class="goods-dsce">
                    <view class="goods-title-tip">
                      <text>{{ item.spuName }}</text>
                    </view>
                    <view class="goods-speci"> </view>
                    <view class="goods-price-info">
                      <view class="goods-price-item">
                        <view class="goods_price">
                          <view class="">
                            <text class="price_main">{{ item.price * 0.01 }}</text>
                          </view>
                        </view>
                      </view>
                      <button @click.stop.prevent="onRemove(item.spuId)">移除</button>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging1"
            v-model="itemList[1]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="video-area">
              <view v-for="item in itemList[1]" :key="item.id" class="video-area-box">
                <u-icon
                  @click="onRemove2(item)"
                  class="close"
                  name="/static/close.png"
                  size="40"
                ></u-icon>
                <image class="video-area-cover" :src="item.coverUrl" mode=""></image>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      scurrent: 0,
      tabsList: [
        {
          name: '商品'
        },
        {
          name: '视频'
        }
      ],
      itemList: [[], []],
      order_id: ''
    }
  },
  onLoad(res) {
    this.queryList()
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.scurrent].length == 0) {
        this.queryList(1, 10)
      }
    },
    queryList(page = 1, pageSize = 10) {
      if (this.scurrent == 0) {
        this.$u
          .get('/app-api/product/favorite/page', {
            pageNo: page,
            pageSize
          })
          .then((res) => {
            this.$refs.paging.complete(res.data.list)
          })
      } else {
        this.$u
          .get('/app-api/vlog/info/favorite-page', {
            pageNo: page,
            pageSize
          })
          .then((res) => {
            this.$refs.paging1.complete(res.data.list)
          })
      }
    },

    queryList2() {},
    onRemove(id) {
      this.$u.delete('/app-api/product/favorite/delete', { spuId: id }).then((res) => {
        this.queryList(1, 10)
      })
    },
    onRemove2(id) {
      this.$u.delete('/app-api/vlog/favorite/delete', { spuId: id }).then((res) => {
        this.queryList(1, 10)
      })
    },
    onResellPush(item) {
      this.$utils.route({
        url: '/goods/resell-push/resell-push',
        params: {
          id: item.id
        }
      })
    },
    onPushComment(item) {
      this.$utils.route({
        url: '/other/push-comment/push-comment',
        params: {
          id: item.id
        }
      })
    },
    onOrderDetail(item) {},
    routeTo() {
      uni.navigateTo({
        url: '/goods/goods-details/goods-details'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background: #f0f1f2;
}

.video-area-box {
  position: relative;
}

.close {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  z-index: 999;
}

.goods-list-box {
  display: flex;
  height: 220rpx;
  background-color: #ffffff;
  padding: 15rpx;
  margin-bottom: 12rpx;
}

.goods-img-box {
  flex: 3;
  width: 210rpx;
  padding: 30rpx;
}
.goods-img {
  width: 190rpx;
  height: 190rpx;
}
.goods-dsce {
  flex: 7;
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}
.goods-title-tip {
  flex: 7;
}

.goods-title-tip text {
  font-size: 33rpx;
}

.goods-speci {
  color: #999999;
  font-size: 28rpx;
  margin-top: 30rpx;
}
.goods-price-item {
  float: left;
  margin-top: 30rpx;
}

.goods-price-info button {
  float: right;
  margin-right: 10rpx;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  border: #f54831 2rpx solid;
  border-radius: 30rpx;

  color: #f54831;
  margin-top: 15rpx;
}

.goods_price {
  flex: 3;
  font-size: 25rpx;
  color: red;
  display: flex;
}

.price_main {
  font-size: 35rpx;
}
.price_dot {
  font-size: 30rpx;
  align-self: flex-end;
}

.video-area {
  &-box {
    float: left;
    width: 33%;
    height: 400rpx;
    .video-area-cover {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
